<template>
	<view class="im-item-box">
		<!-- 时间开始 -->
		<view class="im-time" v-if="itemMobile.datetime">{{itemMobile.datetime}}</view>
		<!-- 时间结束 -->
		<view :class="itemMobile.self_side ? 'im-item im-right' : 'im-item im-left'">
			<view class="photo">
				<image :src="itemMobile.avatar"></image>
			</view>
			<view class="phone-box">
				<view class="phone-top">
					<view class="phone-img">
						<!-- <img src="../../../../assets/images/im/switch-phone.png" alt="" /> -->
						<image src="@/im/static/img/switch-phone.png"></image>
					</view>
					<view class="phone-text">
						<view v-if="itemMobile.message.status != 1">我想和您交换手机号， 您是否同意</view>
						<view v-else-if="itemMobile.message.status == 1" class="switch-phone-success">
							<view class="success-txt1">{{itemMobile.message.contact}}的手机号</view>
							<view class="success-txt2">{{itemMobile.message.mobile}}</view>
						</view>
					</view>
				</view>
				<view class="phone-bottom">
					<!-- 0申请中 1同意 2拒绝 -->
					<view v-if="itemMobile.message.status == 0" class="btn-phone-default">
						<view class="btn refuse" @click="handleRefuse">拒绝</view>
						<view class="btn agree" @click="handleAgree">同意</view>
					</view>
					<view v-else-if="itemMobile.message.status == 1" class="btn-phone-success">
						<view class="btn dial" @click="handleDial">拨号</view>
						<view class="btn copy" @click="handleCopy(itemMobile.message.mobile)">复制</view>
					</view>
					<view v-else-if="itemMobile.message.status == 2" class="btn-phone-error">已拒绝</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		parseTime,
		formatTime
	} from '@/utils/index.js'
	import {mapState} from 'vuex'
	export default {
		props: ['itemMobile'],
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			},
			interviewTimeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		computed: {
		},
		methods: {
			/**
			 * 拒绝
			 */
			handleRefuse() {
				this.$emit('handleExchangeMobileRefuse', this.itemMobile)
			},
			/**
			 * 同意
			 */
			handleAgree() {
				this.$emit('handleExchangeMobileAgree', this.itemMobile)
			},
			/**
			 * 拨打电话
			 */
			handleDial() {
				uni.makePhoneCall({
					phoneNumber: this.itemMobile.message.mobile
				})
			},
			/**
			 * 复制电话
			 */
			handleCopy(mobile) {
				uni.setClipboardData({
					data: mobile, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({ //提示
							title: '复制失败',
							icon: 'error'
						})
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 交换手机号微信号开始
	.phone-box {
		width: 480rpx;
		height: 240rpx;
		background: #ffffff;
		border-radius: 30rpx;

		.phone-top {
			display: flex;
			padding: 42rpx 50rpx 40rpx 50rpx;
			align-items: center;
			.phone-img {
				width: 68rpx;
				height: 68rpx;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.phone-text {
				flex: 3;
				color: #333;
				font-size: 28rpx;

				.switch-phone-success {
					.success-txt2 {
						color: #ff6524;
					}
				}
			}
		}

		.phone-bottom {

			.btn-phone-default {
				display: flex;
				justify-content: center;

				.btn {
					width: 120rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;

					&.agree {
						background: #5792ff;
						border: 2rpx solid #5792ff;
						color: #fff;
						margin-left: 52rpx;
					}

					&.refuse {
						background: #ffffff;
						border: 2rpx solid #94baff;
						color: #5792ff;
					}
				}
			}

			.btn-phone-success {
				display: flex;
				border-top: 2rpx solid #ededed;

				.btn {
					flex: 1;
					text-align: center;
					line-height: 84rpx;
					position: relative;
					font-size: 28rpx;

					&::before {
						content: "";
						position: absolute;
						right: 0;
						width: 2rpx;
						height: 42rpx;
						background: #ededed;
						top: 50%;
						transform: translateY(-50%);
					}

					&:last-child::before {
						display: none;
					}

					&.copy {
						// color: $textActiveColor;
					}

					&.dial {
						color: #666666;
					}
				}
			}

			.btn-phone-error {
				border-top: 2rpx solid #ededed;
				text-align: center;
				height: 84rpx;
				line-height: 84rpx;
				color: #999999;
				font-size: 28rpx;
			}
		}
	}

	// 交换手机号微信号结束
</style>
